<template>
    <div>
        <el-table
            :data="setTree"
            style="width: 100%;"
            row-key="id"
            border
            lazy
            :load="load"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
            <el-table-column
                prop="date"
                label="日期"
                width="180"
            />
            <el-table-column
                prop="name"
                label="姓名"
                width="180"
            />
            <el-table-column
                prop="address"
                label="地址"
            />
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            setTree: [],

            // 三级
            list: [
                {
                    id: 1,
                    parentId: 0,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    hasChildren: true
                }, {
                    id: 2,
                    parentId: 0,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    id: 3,
                    parentId: 1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    hasChildren: true
                }, {
                    id: 4,
                    parentId: 1,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    id: 5,
                    parentId: 3,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    hasChildren: true
                }, {
                    id: 6,
                    parentId: 3,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    id: 7,
                    parentId: 5,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: 8,
                    parentId: 5,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: 9,
                    parentId: 5,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: 10,
                    parentId: 5,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }

            ]

        }
    },
    created() {
        this.setTree = this.getDataList(0)
    },

    methods: {
        getDataList(id) {
            var listArr = []
            for (var i in this.list) {
                if (this.list[i].parentId == id) {
                    listArr.push(this.list[i])
                }
            }
            return listArr
        },
        // 懒加载
        load(tree, treeNode, resolve) {
            let that = this
            var data = that.getDataList(tree.id)
            setTimeout(() => {
                resolve(data)
            }, 2000)

            console.log('1:', tree, '2:', treeNode.data, '3:', resolve)
        }
    }
}
</script>
